import { Spin, Button, Radio, Input, Space  , Col, Row, DatePicker,Divider,Image } from 'antd';

import {
  LeftOutlined,
  RightOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons'
import React, { useState} from 'react';
const { RangePicker } = DatePicker;
import styles from './style.less'
import report from '/public/report.png';
import print from '/public/print.png';
import power1 from '/public/report/power/11.png';
import power2 from '/public/report/power/22.png';
import power3 from '/public/report/power/33.png';
import power4 from '/public/report/power/44.png';
import power5 from '/public/report/power/55.png';
import power6 from '/public/report/power/66.png';
import { SearchOutlined} from '@ant-design/icons';
import html2canvas from 'html2canvas';
import printJS from 'print-js';

import { Page ,pdfjs,Document} from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
import pdfurl from '/public/redux.pdf';
import PdfPreview from '../pdfview';

const PowerConsumption: React.FC = () => {
 

  const [numPages, setNumPages] = useState(1)

  const [pdfheight, setPdfheight] = useState(900)

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages)
  }

 

  const [value,setValue] = useState<number>(1)  
  function onChange(e) {
    console.log('radio checked', e.target.value);
    setValue(e.target.value)
     
  };
  const onSearch = (val) => {
    console.log('search:', val);
  }

  

  function _print(imageData) {
    printJS({
        printable: imageData,
        type: 'image',
        documentTitle: '&nbsp'
    });
    //that.afterPrint();
}

  const handlePrint = (id) => {
  id="pdfPrint1";


const ptargetDom = document.getElementById(id);
//重新设置div高度防止截屏不全
var height=ptargetDom.style.height;
setPdfheight(ptargetDom.scrollHeight);

window.setTimeout(function() {
  const targetDom = document.querySelector("#"+id)
  html2canvas(targetDom , {
    scale:window.devicePixelRatio,
    backgroundColor: 'white',
    useCORS: true,
    dpi: window.devicePixelRatio,
    allowTaint: false,
    height: targetDom.scrollHeight,
    width: 595,
    windowHeight: targetDom.scrollHeight, //获取Y方向滚动条内容
   // windowWidth: document.body.scrollWidth, //获取Y方向滚动条内容
    x: 0,                                                                            //页面在水平方向没有滚动，故设置为0
    y: window.pageYOffset  ,     
  }).then(canvas => {
      setPdfheight(height.replace('px',''));
      console.log(height)
      console.log(pdfheight)
      var context = canvas.getContext('2d');
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      const imageData = canvas.toDataURL("image/jpeg", 1);
 
   
    _print(imageData);
  });

  
  },100)


  }
    return (
      <Row className={styles.report}>
        <Row        style={{ margin: '-16px 0 '}} > 
          <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <div  className={styles.inputBg} >
              <RangePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false}  />
            </div>
            <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px',    marginTop: '16px'}}>
                <Input bordered={false}  className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
              <Divider style={{    borderTop: '2px solid #355fb8'}}></Divider>
       
              <Radio.Group onChange={onChange} value={value}>
              <Space direction="vertical">
                <Radio value={1}>全部</Radio>
                <Radio value={2}>三栋二车间</Radio>
                <Radio value={3}>三栋三车间</Radio>
                <Radio value={4}>三栋四车间</Radio>
                <Radio value={5}>三栋二车间</Radio>
                <Radio value={6}>三栋三车间</Radio>
                <Radio value={7}>三栋四车间</Radio>
              </Space>
            </Radio.Group>
          </Col>
          <Col xl={18} lg={18} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row gutter={[0,24]} style={{justifyContent: 'space-around'}}>
               <div style={{    height: pdfheight+'px',width: '620px',overflowY: 'scroll'}} id='pdfPrint'>
                <Image width={600}   height={800} src={power1}   preview={false} />
                <Image width={600}   height={800} src={power2}   preview={false} />
                <Image width={600}   height={800} src={power3}   preview={false} />
                <Image width={600}   height={800} src={power4}   preview={false} />
                <Image width={600}   height={800} src={power5}   preview={false} />
                <Image width={600}   height={800} src={power6}   preview={false} />
               
              </div>
            
             

              <Image width={80}    height={80} src={print}  preview={false} />  
            
             <div style={{    height: pdfheight+'px',width: '720px',overflowY: 'scroll'}} id='pdfPrint1'>
                <Document file={pdfurl} onLoadSuccess={onDocumentLoadSuccess} >
                {
                          new Array(numPages).fill('').map((item, index) => {
                            console.log(numPages)
                            console.log(index)
                              return <Page width={700}  key={index} pageNumber={index+1} />
                          })
                      }
                </Document>
              </div>
              <Image width={80}   onClick={handlePrint}  height={80} src={print}  preview={false} /> 
                 {/* <PdfPreview url={pdfurl} /> */}
            </Row>
           
      
          

          
          </Col>
        </Row>
       
  </Row>
    );
};

export default PowerConsumption;